import { Slider, ActionIcon } from '@mantine/core';
import { 
  IconPlayerPlay, 
  IconPlayerPause,
  IconVolume,
  IconVolume3,
  IconVolumeOff,
  IconFolderOpen
} from '@tabler/icons-react';
import './Controls.css';
import { invoke } from '@tauri-apps/api';

interface ControlsProps {
  isPlaying: boolean;
  volume: number;
  currentTime: number;
  duration: number;
  isMuted: boolean;
  playbackSpeed: number;
  onPlay: () => void;
  onPause: () => void;
  onSeek: (time: number) => void;
  onVolumeChange: (volume: number) => void;
  onMuteToggle: () => void;
  onSpeedChange: (speed: number) => void;
}

const SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 4];

export function Controls({
  isPlaying,
  volume,
  currentTime,
  duration,
  isMuted,
  playbackSpeed,
  onPlay,
  onPause,
  onSeek,
  onVolumeChange,
  onMuteToggle,
  onSpeedChange,
}: ControlsProps) {
  const formatTime = (seconds: number) => {
    const h = Math.floor(seconds / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    const s = Math.floor(seconds % 60);
    return h > 0
      ? `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
      : `${m}:${s.toString().padStart(2, '0')}`;
  };

  const VolumeIcon = isMuted
    ? IconVolumeOff
    : volume > 0.5
    ? IconVolume3
    : IconVolume;

  const handleFileOpen = async () => {
    const { open } = await import('@tauri-apps/api/dialog');
    const selected = await open({
      multiple: false,
      filters: [{ name: 'Video', extensions: ['mp4', 'avi', 'mkv', 'mov', 'wmv', 'webm'] }]
    });
    if (selected && typeof selected === 'string') {
      await invoke('load_media', { path: selected });
      // 仅加载不播放
    }
  };

  return (
    <div className="controls-container">
      <div className="progress-bar">
        <Slider
          value={currentTime}
          onChange={onSeek}
          min={0}
          max={duration}
          label={formatTime}
          size="sm"
          styles={{
            track: { height: 2 },
            bar: { backgroundColor: '#0A84FF' },
            thumb: { 
              backgroundColor: 'white',
              borderColor: '#0A84FF',
              boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
            },
          }}
        />
      </div>

      <div className="controls-row">
        <div className="left-controls">
          <ActionIcon
            className="file-open-btn"
            onClick={handleFileOpen}
            size="md"
            variant="transparent"
          >
            <IconFolderOpen size={18} />
          </ActionIcon>

          <div className="time-display">
            {formatTime(currentTime)}
          </div>
        </div>

        <div className="center-controls">
          <ActionIcon
            className="play-pause-btn"
            onClick={isPlaying ? onPause : onPlay}
            size="lg"
            variant="filled"
          >
            {isPlaying ? (
              <IconPlayerPause size={24} strokeWidth={1.8} />
            ) : (
              <IconPlayerPlay size={24} strokeWidth={1.8} />
            )}
          </ActionIcon>
        </div>

        <div className="right-controls">
          <div className="volume-control">
            <ActionIcon
              onClick={onMuteToggle}
              size="md"
              variant="transparent"
            >
              <VolumeIcon size={18} />
            </ActionIcon>
            <div className="volume-slider">
              <Slider
                value={isMuted ? 0 : volume}
                onChange={onVolumeChange}
                min={0}
                max={1}
                step={0.01}
                styles={{
                  track: { height: 2 },
                  bar: { backgroundColor: '#0A84FF' },
                  thumb: { 
                    backgroundColor: 'white',
                    borderColor: '#0A84FF',
                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
                  },
                }}
              />
            </div>
          </div>

          <select
            className="speed-select"
            value={playbackSpeed}
            onChange={(e) => onSpeedChange(Number(e.target.value))}
          >
            {SPEEDS.map(speed => (
              <option key={speed} value={speed}>
                {speed}x
              </option>
            ))}
          </select>
        </div>
      </div>
    </div>
  );
}
